<template>
  <Card>
    <div class='flex items-center justify-between'>
      <div class='text-base flex items-center font-bold text-black'>
        <Checkbox class='mr-2' v-model='item.selected'></Checkbox>
        #{{ item.id }}.
        {{ item.name }}
      </div>
      <div v-if='!item.isDel && item.finishIndex < nowIndex && item.isSuccess'>
        <Button type='info' class='mr-2' icon='md-create' @click='showUpdateTaskDialog'>
          修改
        </Button>
        <Button type='warning' class='mr-2' icon='md-hand' @click='finish(false)'>
          拒绝
        </Button>
        <Button type='primary' icon='md-checkmark' @click='finish(true)'>
          完成
        </Button>
      </div>
      <Tag v-if='type == 2' color='success'>已完成</Tag>
      <Tag v-if='type == 3' color='warning'>已拒绝</Tag>
      <Tag v-if='type == 4' color='error'>已删除</Tag>
    </div>
    <div class='border code-input mt-4 bg-[#f3f3f3] h-[200px] relative outline-0 content-box overflow-y-auto'>
      <div ref='contentRef'></div>
      <div @click='copy'
           class='p-1 px-3 cursor-pointer bg-[#f6f8fa] hover:bg-[#f3f4f6] border rounded-b absolute right-2 top-2'>
        <Icon type='md-copy text-base' />
      </div>
    </div>
    <div class='flex mt-2 items-center justify-end'>
      <div class='text-xs text-gray-400'>{{ dayjs(item.createTime).format('YYYY-MM-DD HH:mm:ss') }} by
        {{ item.createName }}
      </div>
    </div>
  </Card>
  <base-modal ref='baseModelRef'></base-modal>
  <update-task-dialog ref='updateTaskDialogRef'></update-task-dialog>
</template>

<script>
import { Button, Card } from 'view-ui-plus'
import 'highlight.js/styles/default.css'

import hljs from 'highlight.js/lib/core'
import sql from 'highlight.js/lib/languages/sql'
import dayjs from 'dayjs'
import { copyToClipboard, getPrefix, getSuffix } from '@/tool/textTool'
import axios from 'axios'
import { HTTP_API } from '@/global/global'
import BaseModal from '@/components/BaseModal.vue'
import UpdateTaskDialog from '@/components/updateTaskDialog.vue'

export default {
  name: 'TaskBox',
  computed: {
    dayjs() {
      return dayjs
    }
  },
  props: {
    item: Object,
    nowIndex: Number,
    type: Number
  },
  watch: {
    item: {
      handler() {
        this.$nextTick(() => {
          if (this.item.content == null || this.item.content == '') {
            return ''
          }
          hljs.registerLanguage('sql', sql)
          if (this.$refs.contentRef) {
            this.$refs.contentRef.innerHTML = this.highlightBlock(hljs.highlight(this.item.content, { language: 'sql' }).value, 'sql')
          }
        })
      },
      immediate: true
    }
  },
  methods: {
    highlightBlock(str, lang) {
      return `<pre class='pre-code-box'><div class='pre-code-header'></div><div class='pre-code'><code class='hljs code-block-body ${lang}'>${str}</code></div></pre>`
    },
    finish(flag) {
      this.$refs.baseModelRef.show('提示', flag ? '是否完成该任务' : '是否拒绝该任务', async () => {
        try {
          const formData = new FormData()
          formData.append('taskId', this.item.id)
          formData.append('flag', flag)
          await axios.post(HTTP_API + '/task/finishTask', formData)
          this.$Message.success(flag ? '任务已完成' : '任务已拒绝')
        } catch (err) {
          console.error(err)
          this.$Message.error(flag ? '任务完成失败' : '任务拒绝失败')
        } finally {
          this.$emit('refresh')
        }
      })
    },
    showUpdateTaskDialog() {
      this.$refs.updateTaskDialogRef.show(this.item)
    },
    copy() {
      let text = getPrefix(this.item)
      text += this.item.content
      text += getSuffix(this.item)
      copyToClipboard(text)
      this.$Message.success('复制成功')
    }
  },
  components: { BaseModal, Button, UpdateTaskDialog, Card }
}
</script>

<style scoped>
.content-box {

}
</style>